<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		userStore
	} from '@/pinia';
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	let router = useRouter()
	const userStoreInfo = userStore();
	const fileList1 = ref([]);
	const {
		proxy,
	} = getCurrentInstance()
	const userRole = userStoreInfo.userFlag
	// console.log(userStoreInfo.userFlag);
	import goodsCard from "@/components/goods-card/goods-card.vue"
	let searchWord = ref('')
	let tabsList = ref([{
		name: '出售中(0)',
	}, {
		name: '待上架(0)',
	}])
	let tabCurrent = ref(0)
	let inventoryIngList = ref([{
		name: '白色',
	}, {
		name: '黑色',
	}])
	let current = ref(0)
	let currentIng = ref(0)
	let currentWait = ref(0)
	let ingShow = ref(false)
	let waitShow = ref(false)
	//出售中
	let goodList = ref([])
	//待上架
	let shangjiaList = ref([])
	let isEdit1 = ref<boolean>(false)
	let all1 = ref(false)
	let all2 = ref(false)
	let modalTitle = ref('修改库存')
	onReachBottom(() => {
		if (isEdit1.value) return
		if (tabCurrent.value == 0) {
			page1.value++
			getList(tabCurrent.value)
		} else {
			page2.value++
			getList(tabCurrent.value)
		}
	})
	let page1 = ref(1)
	let page2 = ref(1)
	const getList = (e) => {
		proxy.$req('GET', proxy.$api.gysGoodsQuery, {
			pageNo: e == 0 ? page1.value : page2.value,
			pageSize: 20,
			isShow: e == 0 ? 1 : 0,
			name: searchWord.value
		}).then((res) => {
			if (e == 0 && !searchWord.value) {
				//上架
				goodList.value = goodList.value.concat(res.result.records)
				tabsList.value[0].name = `出售中（${goodList.value.length}）`
			} else if (e == 1 && !searchWord.value) {
				//下架
				shangjiaList.value = shangjiaList.value.concat(res.result.records)
				tabsList.value[1].name = `待上架（${shangjiaList.value.length}）`
			} else if (e == 0 && searchWord.value) {
				goodList.value = res.result.records
				tabsList.value[0].name = `出售中（${goodList.value.length}）`
			} else if (e == 1 && searchWord.value) {
				shangjiaList.value = res.result.records
				tabsList.value[1].name = `待上架（${shangjiaList.value.length}）`
			}
		})
	}
	getList(tabCurrent.value)
	getList(1)
	const searchPage = () => {
		console.log(searchWord.value);
		if (tabCurrent.value == 0) {
			goodList.value = []
			page1.value = 1
		} else {
			shangjiaList.value = []
			page2.value = 1
		}
		getList(tabCurrent.value)
	}
	const routerLink = (name) => {
		//路由管理
		router.push({
			name,
			params: {
				data: encodeURIComponent(JSON.stringify(fileList1.value))
			}
		})
		fileList1.value = []
	}
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		uni.showLoading({})
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		};
		if (fileList1.value.length) {
			console.log(fileList1.value, "打印value")
			uni.hideLoading()
			uni.$on('refreashList', () => {
				shangjiaList.value = []
				page2.value = 1
				goodList.value = []
				page1.value = 1
				getList(1)
				getList(0)
				uni.$off('refreashList')
			})
			routerLink('goodsRelease')
		}
	};
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).result);
					}, 1000);
				},
			});
		});
	};
	const clickTabs = (e) => {
		console.log(e.index, "打印e")
		current.value = e.index
		tabCurrent.value = e.index
		searchWord.value = ''
	}
	const clickTabsInventoryIng = (e) => {
		console.log(e.index, "打印e")
		currentIng.value = e.index
	}
	const clickTabsInventoryWait = (e) => {
		console.log(e.index, "打印e")
		currentWait.value = e.index
	}
	//点击列表选项
	const checkboxChange = (e) => {
		console.log(e)
		if (current.value == 0) {
			var items = goodList.value
		} else {
			var items = shangjiaList.value
		}
		var values = e.detail.value;
		for (var i = 0, lenI = items.length; i < lenI; ++i) {
			const item = items[i]
			if (values.includes(item.id)) {
				item.checked = true
			} else {
				item.checked = false
			}
		}
		if (current.value == 0) {
			if (values.length == goodList.value.length) {
				all1.value = true
			} else {
				all1.value = false
			}
		} else {
			if (values.length == goodList.value.length) {
				all2.value = true
			} else {
				all2.value = false
			}
		}

	}

	const changeEdit = () => {
		isEdit1.value = !(isEdit1.value)
	}
	//全选
	const checkboxChangeAll = (e) => {
		if (current.value == 0) {
			all1.value = !all1.value
			if (all1.value) {
				goodList.value.forEach(item => {
					item.checked = true
				})
			} else {
				goodList.value.forEach(item => {
					item.checked = false
				})
			}
		} else {
			all2.value = !all2.value
			if (all2.value) {
				shangjiaList.value.forEach(item => {
					item.checked = true
				})
			} else {
				shangjiaList.value.forEach(item => {
					item.checked = false
				})
			}
		}
	}
	//修改库存弹窗
	const clickShow = (e) => {
		console.log(e)
		if (e) {
			modalTitle.value = '修改价格'
		} else {
			modalTitle.value = '修改库存'
		}
		ingShow.value = true
	}
	//上架下架操作
	const shangxiajia = (status, item) => {
		console.log(item);
		proxy.$req('POST', proxy.$api.gysGoodsUpDown, {
			id: item.id,
			isShow: status
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				shangjiaList.value = []
				page2.value = 1
				goodList.value = []
				page1.value = 1
				getList(1)
				getList(0)
			}
		})

	}
	//编辑
	const editGoods = (item) => {
		uni.$on('refreashList', () => {
			shangjiaList.value = []
			page2.value = 1
			goodList.value = []
			page1.value = 1
			getList(1)
			getList(0)
			uni.$off('refreashList')
		})
		router.push({
			name: 'goodsRelease',
			params: {
				id: item.id
			}
		})
	}
	const allShangxia = (e) => {
		let arr = [];
		if (tabCurrent.value == 0) {
			console.log(goodList.value);
			goodList.value.map((item) => {
				if (item.checked) {
					arr.push(item.id)
				}
			})
		} else {
			console.log(shangjiaList.value);
			shangjiaList.value.map((item) => {
				if (item.checked) {
					arr.push(item.id)
				}
			})
		}
		console.log(arr);
		if (e == 3) {
			//删除
			proxy.$req('DELETE', proxy.$api.allDeleteGoods, {
				ids: arr,
			}).then((res) => {
				uni.$u.toast(res.message)
				if (res.success) {
					isEdit1.value = false
					shangjiaList.value = []
					page2.value = 1
					goodList.value = []
					page1.value = 1
					getList(1)
					getList(0)
				}
			})
		} else if (e == 0) {
			//批量下架
			proxy.$req('DELETE', proxy.$api.allXiaGoods, {
				ids: arr,
			}).then((res) => {
				uni.$u.toast(res.message)
				if (res.success) {
					isEdit1.value = false
					shangjiaList.value = []
					page2.value = 1
					goodList.value = []
					page1.value = 1
					getList(1)
					getList(0)
				}
			})
		} else if (e == 1) {
			//批量上架
			proxy.$req('DELETE', proxy.$api.allShangGoods, {
				ids: arr,
			}).then((res) => {
				uni.$u.toast(res.message)
				if (res.success) {
					isEdit1.value = false
					shangjiaList.value = []
					page2.value = 1
					goodList.value = []
					page1.value = 1
					getList(1)
					getList(0)
				}
			})
		}
	}
	const checkVip = () => {
		router.push({
			name: 'maxVip'
		})
	}
	const beTop = (item) => {
		if (!item.isTop) {
			uni.$once('goodsTopOn', ((data) => {
				if (data.flag) {
					goodList.value = []
					page1.value = 1
					getList(0)
					console.log('清除goodsTopOn');
					uni.$off('goodsTopOn')
				} else {
					console.log('清除goodsTopOn');
					uni.$off('goodsTopOn')
				}
			}))
			router.push({
				name: 'buyTop',
				params: {
					data: JSON.stringify(item)
				}
			})
		} else {
			router.push({
				name: 'topCenter',
				params: {
					data: JSON.stringify(item)
				}
			})
		}

	}
</script>
<template>
	<view class="navbar">
		<u-navbar :placeholder="true" leftText="" title="" auto-back>
			<template #center>
				<view style="width: 70%;">
					<u-search placeholder="请输入商品名称" v-model="searchWord" :showAction="false"
						@search="searchPage"></u-search>
				</view>
			</template>
			<template #right>
				<view class="" @click="changeEdit">
					{{ !isEdit1 ? '管理' : '完成'}}
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="cTabs">
		<u-tabs :list="tabsList" :activeStyle="{
			width:'300rpx',
			height:'80rpx',
            color: '#303133',
			textAlign:'center',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
			width:'300rpx',
			height:'80rpx',
			textAlign:'center',
            color: '#606266',
            transform: 'scale(1)'
        }" lineWidth="100rpx" lineColor="#333" :current="tabCurrent" @click="clickTabs"></u-tabs>
	</view>
	<view class="goodsBox" v-if="current == 0">
		<!-- <goods-card></goods-card> -->
		<checkbox-group @change="checkboxChange">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in goodList" :key="index">
				<view class="goodsItem">
					<view class="giTop">
						<view class="check" v-if="isEdit1">
							<checkbox style="transform: scale(0.9)" color="#FFFFFF" class="round" :value="item.id"
								:checked="item.checked" />
						</view>
						<image :src="item.imageList?JSON.parse(item.imageList)[0]:''" style="width: 150rpx;
				height: 150rpx;"></image>
						<view class="gir">
							<text class="u-line-1">{{ item.name }}</text>
							<view class="text">
								<text style="margin-right: 20rpx;">库存{{ item.stock }}</text>
								<text>销量{{ item.sales }}</text>
							</view>
							<text class="money">￥{{ item.price }}</text>
						</view>
					</view>
					<view class="giBtm" v-if="!isEdit1 && current == 0">
						<text @click="beTop(item)">{{ item.isTop==0?'置顶':'置顶中' }}</text>
						<text @click="editGoods(item)">编辑</text>
						<!-- <text @click="clickShow(false)">改库存</text> -->
						<text @click="shangxiajia(0,item)">下架</text>
					</view>
				</view>
			</label>
		</checkbox-group>
		<view class="" style="margin-top: 150rpx;" v-if="goodList.length<1">
			<u-empty mode="list">
			</u-empty>
		</view>
	</view>
	<view class="goodsBox" v-if="current == 1">
		<!-- <goods-card></goods-card> -->
		<checkbox-group @change="checkboxChange">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in shangjiaList" :key="index">
				<view class="goodsItem">
					<view class="giTop">
						<view class="check" v-if="isEdit1">
							<checkbox style="transform: scale(0.9)" color="#FFFFFF" class="round" :value="item.id"
								:checked="item.checked" />
						</view>
						<image :src="item.imageList?JSON.parse(item.imageList)[0]:''" style="width: 150rpx;
				height: 150rpx;"></image>
						<view class="gir">
							<text class="u-line-1">{{ item.name }}</text>
							<view class="text">
								<text style="margin-right: 20rpx;">库存{{ item.stock }}</text>
								<text>销量{{ item.sales }}</text>
							</view>
							<text class="money">￥{{ item.price }}</text>
						</view>
					</view>
					<view class="giBtm" v-if="!isEdit1 && current == 1">
						<!-- <text @click="clickShow(true)">改价格</text>
						<text @click="clickShow(false)">改库存</text> -->
						<text @click="shangxiajia(1,item)">上架</text>
						<text @click="editGoods(item)">编辑</text>
					</view>
				</view>
			</label>
		</checkbox-group>
		<view class="" style="margin-top: 150rpx;" v-if="shangjiaList.length<1">
			<u-empty mode="list">
			</u-empty>
		</view>
	</view>
	<view class="release" v-if="!isEdit1">
		<view class="upload" v-if="userStoreInfo.userInfo.supplierVip==1">
			<u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="5">
				<view class="btn">
					发布
				</view>
			</u-upload>
		</view>
		<view class="upload" @click="checkVip" v-if="userStoreInfo.userInfo.supplierVip==0">
			<view class="btn">
				发布
			</view>
		</view>
	</view>
	<view class="position" v-if="isEdit1 && current == 0">
		<view class="">
			<checkbox-group @change="checkboxChangeAll">
				<label class="uni-list-cell uni-list-cell-pd" @change="">
					<checkbox name="check" style="transform: scale(0.9)" class="round" color="#FFFFFF"
						:checked="all1" />
					全选
				</label>
			</checkbox-group>
		</view>
		<view class="right" @click="allShangxia(0)">
			批量下架
		</view>
	</view>
	<view class="position" v-if="isEdit1 && current == 1">
		<view class="">
			<checkbox-group @change="checkboxChangeAll">
				<label class="uni-list-cell uni-list-cell-pd" @change="">
					<checkbox name="check" style="transform: scale(0.9)" class="round" color="#FFFFFF"
						:checked="all2" />
					全选
				</label>
			</checkbox-group>
		</view>
		<view class="right" @click="allShangxia(1)">
			批量上架
		</view>
		<view class="right" @click="allShangxia(3)">
			批量删除
		</view>
	</view>






	<!--  出售中修改库存-->
	<u-popup :round="10" :show="ingShow" @close="ingShow = false">
		<view class="inventoryIng">
			<view class="title">
				{{modalTitle}}
			</view>
			<view class="tab">
				<u-tabs :list="inventoryIngList" :activeStyle="{
					width:'80rpx',
					height:'50rpx',
				    color: '#303133',
					textAlign:'center',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
					width:'80rpx',
					height:'50rpx',
					textAlign:'center',
				    color: '#606266',
				    transform: 'scale(1)'
				}" lineWidth="80rpx" lineColor="#333" @click="clickTabsInventoryIng"></u-tabs>
			</view>
			<view class="content" v-if="currentIng==0">
				<view class="contentH">
					<image class="img" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="contentC">
					<view>白色</view>
					<view>库存3</view>
				</view>
				<!-- <view class="input">
					<input class="input" placeholder="请输入价格" type="number" style="text-align: right;">
				</view> -->
				<view class="input" v-if="modalTitle == '修改库存'">
					<u-input type="number" placeholder="请输入库存" border="surround" inputAlign="right"></u-input>
				</view>
				<view class="input" v-if="modalTitle == '修改价格'">
					<u-input type="number" placeholder="请输入价格" border="surround" inputAlign="right"
						suffixIcon="rmb-circle" suffixIconStyle="color: #909399"></u-input>
				</view>
			</view>
			<view class="content" v-if="currentIng==1">
				<view class="contentH">
					<image class="img" src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="contentC">
					<view>黑色</view>
					<view>库存5</view>
				</view>
				<view class="input">
					<u-input type="number" placeholder="请输入库存" border="surround" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="postageBtn">
				<view class="btn" @click="ingShow = false">
					<u-button text="取消" :plain="true" color="#CB645E"></u-button>
				</view>
				<view class="btn">
					<u-button text="确定" color="#CB645E"></u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	:deep(.uni-checkbox-input svg) {
		background-color: #CB645E !important;
		padding: 10rpx;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	.inventoryIng {
		padding: 40rpx 0;

		.postageBtn {
			display: flex;
			justify-content: space-around;
			width: 700rpx;
			margin: 50rpx auto;

			.btn {
				width: 300rpx;
			}
		}

		.title {
			width: 750rpx;
			border-bottom: 1px solid #ccc;
			height: 70rpx;
			text-align: center;
			font-weight: 600;
		}

		.content {
			display: flex;
			width: 700rpx;
			height: 500rpx;
			margin: 30rpx auto;

			.img {
				width: 80rpx;
				height: 80rpx;
			}

			.contentC {
				margin: 0 150rpx 0 20rpx;
			}

			.input {
				width: 330rpx;
				height: 100rpx;
			}
		}
	}

	::v-deep .u-upload__wrap__preview {
		display: none;
	}

	.navbar {
		width: 100%;
	}

	.cTabs {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.goodsBox {
		width: 94%;
		margin: 0 auto;
		padding-bottom: 200rpx;
	}

	.release {
		width: 750rpx;
		height: 186rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;

		.upload {
			padding: 0 23rpx
		}

		.btn {
			width: 702rpx;
			height: 98rpx;
			margin: 0 auto;
			background: #CB645E;
			border-radius: 4rpx;
			border-radius: 8rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
			font-weight: 400;
			font-size: 36rpx;
		}
	}

	.goodsItem {
		width: 100%;
		height: 260rpx;
		margin: 20rpx 0;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.giTop {
			width: 100%;
			height: 180rpx;
			display: flex;
			align-items: center;

			.text {
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #6C6C6C;
			}

			.money {
				display: inline-block;
				margin-top: 40rpx;
				color: red
			}

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 15rpx;
			}

			.gir {
				width: 500rpx;
			}
		}

		.giBtm {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			text {
				padding: 4rpx 20rpx;
				background-color: #6C6C6C;
				color: #fff;
				font-size: 24rpx;
				border-radius: 4rpx;
				margin-left: 15rpx;
			}
		}
	}

	.position {
		padding: 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;

		.right {
			width: 226rpx;
			height: 64rpx;
			background: #CB645E;
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			padding: 13rpx;
			box-sizing: border-box;
		}
	}
</style>